<template>
  <div style="text-align:left">
    <!--<span class="photo-title">More photos (max 40)</span>-->
    <input type="file" name="CoverImages" @change="getFile" style="display: none;">
    <!--<div class="color-list">-->
    <!--<div-->
    <!--class="color-item"-->
    <!--v-for="color in uploadPhotoList" v-dragging="{ item: color, list: uploadPhotoList, group: 'color' }"-->
    <!--:key="color.photoId"-->
    <!--&gt;{{color.photoId}}</div>-->
    <!--</div>-->
    <div class="photos-box">
      <div class="color-show">
        <div
          class="color-box"
          v-for="(uploadPhoto,index) in uploadPhotoList" v-dragging="{ item: uploadPhoto, list: uploadPhotoList, group: 'uploadPhoto' }"
          :key="index"
        >
          <img  :src="uploadPhoto.url" :data-src="index" />
          <a href="javascript:;" @click='delImage(index, uploadPhoto.id)'>
          <span class="glyphicon glyphicon-remove">
          <i class="el-icon-delete"></i>
          </span>
          </a>
        </div>
        <div class="color-box" v-if="this.uploadPhotoList.length == 0">
          <a href="javascript:;" class="add-photos" @click='addPic'>
            <span class="glyphicon glyphicon-remove" >
              <i class="el-icon-plus"></i>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'uploadImagesFloor',
    data () {
      return {
        // 图片数据集合
        uploadPhotoList:[],
        //删除的图片id集合，修改图片时传给后台
        delList:[]
      }
    },
    methods: {
      addPic (e) {
        e.preventDefault()
        document.getElementsByName('CoverImages')[0].click()
        return false
      },
      // 获取图片文件
      getFile ($event) {
        let files = $event.target.files || $event.dataTransfer.files
        if (!files.length) return
        let photoListLength = this.uploadPhotoList.length
        for (var i = 0; i < files.length; i++) {
          let f = files[i]
          if (!f.type.match('image.*')) {
            this.$message.error('The type of photos mustbe image!')
            continue
          }
          if (photoListLength >= 40) {
            this.$message.error('Upload up to forty pictures at most!')
            return false
          }
          let tip = false
          for (var j = 0; j < (this.uploadPhotoList).length; j++) {
            if ((this.uploadPhotoList)[j].name) {
              if ((this.uploadPhotoList)[j].name === f.name) {
                this.$message.error('Uploading pictures repeatedly!')
                tip = true
                break
              }
            }
          }
          var reader = new FileReader()
          if (!tip) {
            photoListLength ++
            reader.onload = ((theFile) => {
              return (e) => {
                this.setImageCompress(e, theFile)
                console.log(theFile)
              }
            })(f)
            reader.readAsDataURL(f)
          }
        }
      },
      // 压缩图片
      setImageCompress (e, theFile) {
        let img = new Image()
        img.src = e.target.result
        let canvas = document.createElement('canvas')
        let context = canvas.getContext('2d')
        let self = this
        img.onload = function () {
          // 图片原始尺寸
          let originWidth = this.width
          var originHeight = this.height
          // 最大尺寸限制
          let maxWidth = 800
          let maxHeight = 800
          // 目标尺寸
          let targetWidth = originWidth
          let targetHeight = originHeight
          if (theFile.size > 81920){
            // 图片尺寸超过400x400的限制
            if (originWidth > maxWidth || originHeight > maxHeight) {
              if (originWidth / originHeight > maxWidth / maxHeight) {
                // 更宽，按照宽度限定尺寸
                targetWidth = maxWidth
                targetHeight = Math.round(maxWidth * (originHeight / originWidth))
              } else {
                targetHeight = maxHeight
                targetWidth = Math.round(maxHeight * (originWidth / originHeight))
              }
            }
            // canvas对图片进行缩放
            canvas.width = targetWidth
            canvas.height = targetHeight
            // 清除画布
            context.clearRect(0, 0, targetWidth, targetHeight)
            // 图片压缩
            context.drawImage(img, 0, 0, targetWidth, targetHeight)
            // canvas转为blob并上传
            canvas.toBlob((blob) => {
              console.log(blob)
              let srcUrl = URL.createObjectURL(blob)
              let imgObj = {
                url: srcUrl,
                photoBlob: blob,
                name: theFile.name,
                id: null
              }
              self.uploadPhotoList.push(imgObj)
            }, 'image/jpeg', 0.95)
          } else {
            let blob = new Blob([theFile],{"type":"image/jpeg"});
            console.log(blob)
            let srcUrl = URL.createObjectURL(blob)
            let imgObj = {
              url: srcUrl,
              photoBlob: blob,
              name: theFile.name,
              id: null
            }
            self.uploadPhotoList.push(imgObj)
          }
        }
      },
      // 删除图片 photos
      delImage (e, id) {
        this.uploadPhotoList.splice(e, 1)
        if (id) {
          this.delList.push(id)
        }
        document.getElementsByName('CoverImages')[0].value = ''
      },
      // 供父组件development调用
      removeAllImage () {
        this.uploadPhotoList = []
        document.getElementsByName('CoverImages')[0].value = ''
      }
    },
    mounted () {
      // this.$dragging.$on('dragged', ({ value }) => {
      //   console.log(value)
      //   console.log(value.list)
      // })
    }
  }
</script>
<style>
  .photos-box{
    width: 100%;
  }
  .photos-box .color-box{
    display: block;
    position: relative;
    width: 77px;
    height: 77px;
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
  }
  .photos-box .color-show{
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
  }
  .photos-box .color-box img{
    width:100%;
    height:100%;
  }
  .photos-box .color-box a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
  }
  .photos-box .color-box:hover a{
    display: block;
  }
  .photos-box .color-box .glyphicon{
    width: 100%;
    height: 100%;
    color:#aeaeae;
    display: block;
    text-align: center;
    line-height: 77px;
    background: rgba(0,0,0,.4);
    border-radius: 5px;
  }
  .photos-box .color-box a.add-photos{
    display: block;
    box-sizing: border-box;
    border:1px dashed #D8DCE5;
    border-radius:5px;
  }
  .photos-box .color-box a.add-photos:hover{
    border:1px dashed #409EFF;
  }
  .glyphicon{
    width: 100%;
    height: 100%;
    color:#aeaeae;
    display: inline-block;
    text-align: center;
    line-height: 77px;
    background: rgba(0,0,0,.4);
    border-radius: 5px;
  }
  .photos-box .color-box  .add-photos .glyphicon{
    background: rgba(255,255,255,.7);
  }
</style>
